<template>
  <div id="app">
    <transition name="fadeInTranslateXLeftLabel">
      <left-label class="labelc" v-if="$route.path === '/index'"></left-label>
    </transition>

    <show-live2d></show-live2d>

    <!-- <show-live2d></show-live2d> -->
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </router-view>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { jieliuUtil } from '@/util/util'
// const ShowLive2d = () => import("./views/live2d/live2d.vue");
import ShowLive2d from './views/live2d/live2d.vue'
import LeftLabel from './views/index/leftLabel.vue'
const route = useRoute()
const router = useRouter()
onMounted(() => {
  listenMenu()
  changeBlogWay()
  listenWindowSize()
})
const listenMenu = () => {
  document.addEventListener('contextmenu', function(e) {
    e.preventDefault()
  })
}
const changeBlogWay = () => {
  const phone = route.path.split('h5').length === 2
  if (window.innerWidth <= 768) {
    !phone && router.replace('/index-h5')
  } else {
    phone && router.replace('/index')
  }
}
const listenWindowSize = () => {
  window.addEventListener('resize', () => {
    jieliuUtil(() => {
      changeBlogWay()
    }, 200)
  })
}
const devtool = () => {
  const devtools = () => {}
  console.log('%c', devtools)
  window.opener = null
  window.open('', '_self')
  window.close()
}
const lowShow = ref<boolean>(false)
const Logo = ref<boolean>(true)
const showApp = ref<boolean>(false)
const showBody = ref<boolean>(false)
</script>

<script></script>

<style lang="scss">
@import url('./assets/reset.css');
@import url('./css/comment/animate.css');
@import url('./css/comment/icon.css');
#app {
  width: 100vw;
  height: 100vh;
  position: absolute;
  /* background-color: rosybrown; */
}
.weatherBox {
  position: absolute;
  top: 70px;
  right: 20px;
  z-index: 9;
  width: 200px;
}

.logo-leave-active {
  transition: opacity 0.5s;
}

.logo-leave-to {
  opacity: 0;
}

.index-enter-active {
  transition: opacity 0.5s;
}

.index-enter {
  opacity: 0;
}

* {
  cursor: url('./assets/img/cur/mai1.png'), default;
}

*:active {
  cursor: url('./assets/img/cur/maia.png'), default;
}

@media screen and (min-width: 765px) {
  #app {
    min-width: 1000px;
  }
  .imgBg img {
    min-width: 1000px;
  }
  .labelc {
    position: absolute;
    top: 80px;
    left: 100px;
    width: 100px;
    height: 310px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media screen and (max-width: 765px) {
  .labelc {
    display: none;
  }

  .live2d {
    display: none;
  }

  .logo {
    width: 100%;
  }

  .weatherBox {
    display: none;
  }
}
</style>
